<template>
  <uv-popup ref="popup" mode="bottom" custom-style="height: 45vh" round="23rpx" @change="change">
    <view @tap.stop class="cardDom" :style="{ '--bot': bottom + 8 + 'px' }">
      <view class="top">
        <view class="title">已点菜品</view>
        <view class="deleteBox" @click="deleteItem(0, 0)">
          <uv-icon
            name="trash"
            size="
27.56rpx"
            color="#969799"
          ></uv-icon>
          清空
        </view>
      </view>
      <scroll-view class="content" :scroll-y="true">
        <view class="cardItem" v-for="(item, index) in dataList" :key="item.dishCode">
          <view class="dishBox">
            <view class="dishImg">
              <uv-image
                ref="itemRefsList"
                :src="item.dishUrl"
                width="115.38rpx"
                height="115.38rpx"
                :observeLazyLoad="true"
                mode="aspectFit"
              >
                <template v-slot:error>
                  <view style="font-size: 24rpx">加载失败</view>
                </template>
              </uv-image>
            </view>
            <view class="dishName">{{ item.dishName }}</view>
          </view>
          <view class="deleteBox" @click="deleteItem(item.orderId, index, item.dishCode)">
            <uv-icon
              name="trash"
              size="
27.56rpx"
            ></uv-icon>
            删除
          </view>
        </view>
      </scroll-view>
    </view>
  </uv-popup>
</template>
<script setup lang="ts">
import { CardDish } from '@/service/business/orderingDishes/type'
import { useUserStore } from '@/store'
const userStore = useUserStore()
interface Props {
  dataList?: CardDish[]
  modelValue?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  dataList: () => [],
  modelValue: false,
})
const popup = ref(null)
const bottom = ref(userStore.pinia_SafeVal.bottom)
const show = ref(true)
watch(
  () => props.modelValue,
  () => {
    console.log(props.modelValue)
    if (props.modelValue) popup.value.open()
  },
)
const emit = defineEmits(['update:modelValue', 'deleteItem'])
// 点击取消
const change = (e) => {
  console.log(e)
  if (!e.show) {
    emit('update:modelValue', false)
  }
}
// 点击删除
const deleteItem = (id, index, dishCode) => {
  if (props.dataList.length) {
    emit('deleteItem', { id, index, dishCode })
  } else {
    uni.showToast({
      title: '暂无已选菜肴信息~',
      icon: 'none',
    })
  }
}
</script>

<style lang="scss" scoped>
.cardDom {
  height: 45vh;
  font-size: 23rpx;
  font-weight: 400;
  color: #595a5b;
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  padding-top: 15.38rpx;
  font-weight: 600;
  font-size: 27rpx;
  color: #111111;
  border-radius: 23rpx 23rpx 0rpx 0rpx;
  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 103.85rpx;
    padding: 0 30.77rpx;
    .deleteBox {
      color: #969799;
    }
  }
  .content {
    padding: 15.39rpx 0;
    box-shadow: inset 0rpx 2rpx 0rpx 0rpx #ebedf0;
    height: calc(100% - 250.85rpx);
    background: #fff;
    .cardItem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: calc(100% - 61.54rpx);
      margin: 15.38rpx 30.77rpx 0;
      padding: 15.38rpx 0;
      height: 115.38rpx;
      box-shadow: inset 0rpx -2rpx 0rpx 0rpx #ebedf0;
      .dishImg {
        margin-right: 15.38rpx;
      }
      .dishBox {
        display: flex;
        align-items: center;
        flex: 4;
      }
    }
  }
  .deleteBox {
    display: flex;
    width: 84.62rpx;
    justify-content: space-between;
    font-weight: 400;
    font-size: 23rpx;
    color: #595a5b;
  }
}
</style>
